<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction 
      @click="updateIndex"
      :instruction="instruction" :showRadioCheck="true">
    </play-instruction>
    <div class="select-row" v-for="(item, index) in getCurrentLotteryState" :key="item.id">
      <div v-if="index == 1">
        <checkbox-selector class="checkbox-selector" :item="item" @click="handleUpdateData"></checkbox-selector>
      </div>
      <div v-else>
        <lottery-ball-only
          :activeSwitchIndex="activeSwitchIndex"
          @click="handleUpdateData"
          :item="item">
        </lottery-ball-only>
      </div>
    </div>
  </div>
  <div v-else class="number-select-phone">
    <div class="select-row" v-for="(item, index) in getCurrentLotteryState" :key="item.id">
      <div v-if="index == 1" class="border-bottom selector">
        <checkbox-selector :item="item" @click="handleUpdateData"></checkbox-selector>
      </div>
      <div v-else class="border-bottom lottery-balls">
        <lottery-ball-only
          :activeSwitchIndex="getRadioSelectorIndex"
          @click="handleUpdateData"
          :item="item">
        </lottery-ball-only>
      </div>
    </div>
  </div>
</template>

<script>
import LotteryBallOnly from '@/components/lottery-type/common/lottery-ball-only'
import CheckboxSelector from '@/components/base/checkbox-selector/checkbox-selector'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import { ballWithSelectorMixin } from '@/assets/js/mixin.js'

export default {
  mixins: [ballWithSelectorMixin],
  components: {
    PlayInstruction,
    LotteryBallOnly,
    CheckboxSelector,
  },
  data() {
    return {
      instruction: '任二和值',
      activeSwitchIndex: 0,
      lotteryCount: 0
    }
  }
}
</script>

<style lang="stylus" scoped>
  @media screen and (min-width 750px)
    .select-row >>> .balls-only
      padding-left 0 !important
      align-items flex-start
      .tail-box 
        margin-top 3px
      .numbers
        display flex 
        flex-wrap wrap 
        .lottery-ball
          margin-bottom 10px
    .select-row 
      margin-left 20px
      .checkbox-selector
        margin-left 110px
        margin-top 30px
        margin-bottom 30px
  @media screen and (max-width 750px) 
    .number-select-phone >>> .checkbox-selector
      justify-content center
    .number-select-phone >>> .balls-only 
      margin 0
      .tail-box-wrapper 
        display none
        font-size 0
      .numbers 
        flex-wrap wrap 
        .lottery-ball 
          width 20% 
          margin-right 0
          margin-bottom 10px
          .ball 
            width 48px
            height 48px
            line-height 48px 
            font-size 20px
            font-weight 500
            margin 0 auto
    .number-select-phone 
      box-sizing border-box 
      padding 10px 10px 0 10px  
      .selector 
        padding 10px 0
</style>